<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/layui.css">
    <title>时间线</title>
</head>
<script src="../layui.js"></script>
<script src="../js/html2canvas.min.js"></script>
<script src="../js/jquery.min.js"></script>
<style>
    #tlprepic {
        padding: 20px;
    }
</style>
<div class="layui-container">
    <div class="layui-row">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
            <legend>时间线</legend>
        </fieldset>
        <form class="layui-form" lay-filter="tlform" action="">

            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">数据</label>
                <div class="layui-input-block">
                    <textarea name="timedes" placeholder="请输入"
                        class="layui-textarea">[{"title":"8月15日","value":"以前"},{"title":"8月16日 开始","value":"颜色处理。拼音"},{"title":"8月17日","value":"生成名字"},{"title":"8月18日","value":"图表。二维码。时间线"}]</textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn" id="tlbtn">确定</button>
                    <button type="button" class="layui-btn" id="tlpicbtn">截图</button>
                    <button type="button" class="layui-btn" id="hpbtn">帮助</button>
                </div>
            </div>
        </form>
        <div class="layui-row">
            <div class="layui-form-item" style="margin-top:60px;" id="tlprepic">
                <ul class="layui-timeline" id="seetl">
                </ul>
            </div>
        </div>

        <div class="layui-form-item" id="tlpic" style="padding: 6px;">
        </div>



    </div>
</div>
<script>
    layui.use(['form', 'layer', 'element'], function () {
        var form = layui.form
            , layer = layui.layer
            // , layedit = layui.layedit
            , layer = layui.layer
            , element = layui.element;
            // , colorpicker = layui.colorpicker
            // , upload = layui.upload
            // , laydate = layui.laydate;

        var seetl = document.getElementById("seetl");
        layui.$('#tlbtn').on('click', function () {
            var datatl = form.val('tlform');
            if (datatl['timedes']) {
                try {
                    var arrt = JSON.parse(datatl['timedes']);
                } catch (err) {
                    layer.alert('输入数据格式有误！', { icon: 5 });
                }
                var newarrt = [];
                try {
                    arrt.map((item) => {
                        let newarrtv = item.value.split("。");
                        newarrt.push({
                            "title": item.title,
                            "value": newarrtv
                        })
                    })
                } catch (err) {
                    layer.alert('输入数据有误！', { icon: 5 });
                }

                var strtl = "";
                let newarrt1 = newarrt.reverse();
                newarrt1.map((item) => {
                    strtl += `<li class="layui-timeline-item">
                    <i class="layui-icon layui-timeline-axis"></i>
                    <div class="layui-timeline-content layui-text">
                        <h3 class="layui-timeline-title">${item.title}</h3>
                        <ul>`;
                    console.log(item.value.length)
                    item.value.map((item) => {
                        strtl += `<li>${item}</li>`;
                    })
                    strtl += `</ul></div></li>`;

                })
                seetl.innerHTML = strtl;
            } else {
                layer.alert('输入数据！', { icon: 5 });
            }
        })

        layui.$('#tlpicbtn').on('click', function () {
            let pictl = document.querySelector("#tlpic");
            setTimeout(function () {
                $('#tlpic').empty();
                html2canvas(document.querySelector("#tlprepic")).then(canvas => {
                    let img = new Image();
                    img.src = canvas.toDataURL();
                    // img.style.cssText += "position:absolute;width:100%;left:0;top:0;";
                    pictl.appendChild(canvas);

                    layer.open({
                        type: 1,
                        shade: false,
                        title: false, //不显示标题
                        content: $('#tlpic'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
                        cancel: function () {
                            $('#tlpic').empty();
                            // layer.msg('关闭图片', { time: 1000, icon: 6 });
                        }
                    });


                });

            }, 100);
        })
        layui.$('#hpbtn').on('click', function () {
            layer.alert('按value内的。号自动显示分项.弹出截图,对截图右键另存为', { icon: 6 });
        })

    })

</script>

<body>

</body>

</html>